<template>
  <div>
    <van-cell-group border>
      <van-field v-model="mm" label="验证码" placeholder="请输入密码" autofocus>
        <template #button>
          <van-button
            size="small"
            type="primary"
            :disabled="btnFlag"
            @click="sedMsg"
            >{{ txt }}</van-button
          >
        </template></van-field
      >
    </van-cell-group>
    <div class="loginBtn">
      <van-button type="danger" round block :disabled="flag" @click="next"
        >下一步</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
import { GETYZM,DoCheckCode } from "@/request/api";
export default {
  data() {
    return {
      mm: "",
      //   flag: false,
      // flag是不是需要依赖我们的 tel来计算它的true和false
      txt: "发送验证码",
      time: 60,
      btnFlag: false,
    };
  },
  computed: {
    flag() {
      if (/^\d{5}$/.test(this.mm)) {
        return false; //红的
      } else {
        return true; //灰色的
      }
    },
  },

  methods: {
    next() {
      this.$router.push("/register/treen");
    },
    sedMsg() {
      // 视图效果上发送验证码
      const timer = setInterval(() => {
        this.time--;
        if (this.time == 0) {
          clearInterval(timer);
          this.txt = "发送验证码";
          this.time = 60;
        } else {
          this.txt = this.time + "s后可以发送验证码";
          this.btnFlag = true;
        }
      }, 1000);
      // // 实际上进行请求发送，延时器
      setTimeout(() => {
        GETYZM({ tel: localStorage.getItem("tel") }).then((res) => {
          console.log(res.data.data);
          this.mm = res.data.data;
        });
      }, 1500);
    },
    next(){
        // 验证验证码
        DoCheckCode({tel:localStorage.getItem('tel'),telcode:this.mm}).then(res=>{
          if (res.data.code==10007) {
            // console.log("验证码错误")
            Toast('验证码有误，请重新输入.....');
          } else {
              console.log("验证码正确")
              this.$router.push('/register/treen')
          }
           console.log(res.data.code);
        })
    }
   
  },
};
</script>

<style>
.loginBtn {
  width: 80%;
  margin: 20px auto;
}
</style>